.root {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('./login-bg.jpg') no-repeat center;
    background-size: cover;
    overflow: hidden;
    opacity: 0;
    transition: 3s ease-in;

    &.active {
        opacity: 1;

        .logo {
            transform: translateX(0);
        }
    }

    .star {
        position: absolute;
        left: 0;
        top: 0;
        animation: star-animation 2s linear infinite;
    }

    @keyframes star-animation {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .logo {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50px;
        left: 50px;
        transition: 500ms ease-in;
        transition-delay: 1s;
        transform: translateX(-150%);

        img {
            width: 50px;
        }

        span {
            color: #fff;
            font-size: 25px;
            margin-left: 10px;
        }
    }
}
